JavaScriptのModule System

ES2015(2015/6)より前のJSにはmoduleの仕様がなかった

ES2015で入った

ちなみにNode.jsの公開は2009年頃

そのため、それまでにいくつかのmodule systemに関する仕様が誕生した

table:仕様と実装

仕様実装例

CommonJS Node.js server向け

AMD(JS) RequireJS browser向け

ES Modules ES2015から入った標準の仕様

今後の対応

ブラウザの場合

IEを切れるなら素のESModules

切れないならWebpack + ESModules

Node.jsの場合

CommonJSを使っている所も多い

ESModulesも使える

歴史的な流れ

原初のJS ref

2000年代にJSが流行りだしたが、module周りのことが仕様で決まっていなかった

ブラウザ用の言語だったので<script>を使った読み込みで十分だった

2009年にNode.jsが登場し、server sideでも実行できるようになったが、module周りが決まってないので困った

https://qiita.com/qnighy/items/067dd47c48b96e772a4e#commonjs-modules-cjs

そこで、Node.jsのmodule systemのために(?)、2009/1にServerJSが登場した

これが2009/8に改名し、CommonJSになった

当時の実装はNode.jsということか #??

このときはBrowserifyは生まれてないmrsekut.icon

この流れの延長で、browser上でもmodule system欲しいとなった

2010年頃にAMD(JS)が策定

2011年頃にAMDのブラウザ上の実装としてRequireJSが誕生

2011/6にCommonJSのブラウザ上の実装としてBrowserifyが誕生

2012にWebpackが誕生し、2015年あたりで流行りだす

2015年にES2015が策定され、ここにES Modulesが含まれる(たぶん)

仕様が決まっただけでまだ使えなかったらしい

WebpackがES Modulesに対応

BabelでES Modules→CommonJSのトランスパイルができるようになった

2017年頃、モダンブラウザではES Modulesが使えるようになった

2017年のNode.js v8.5.0でES Modulesがexperimentalとしてリリース

--experimental-modules

2019年頃、Node.js v13.2.0でexperimentalが外れ、正式にES Modulesが使えるようになった

Node.jsのES Modules対応

SWCのinitial commitは意外と古く2017/12/22とか

よく使われるようになったのは2021年頃とかかな

#??

今後、ESModuleが主流になれば、Webpackは死んでくれるのか？

というかこの辺のmodule system周りのぐちゃぐちゃは全部消えてくれるのか？

世界はシンプルになろうとしているのか？ということを知りたい

参考

JavaScriptのモジュールの歴史 | undefined

CommonJSとESモジュールが混在している理由 | TypeScript入門『サバイバルTypeScript』

https://dl.acm.org/doi/abs/10.1145/3386327

JSの20年の歴史

189ページのPDF

https://postd.cc/the-state-of-javascript-modules/

https://speakerdeck.com/10shi10ma/li-shi-karaxue-buxian-dai-falsehurontoendo?slide=47

JSエコシステムぶらり探訪(1): 原初のJavaScript - Qiita

シリーズ

何記事かに渡ってJSの辿ってきた流れがわかる

https://zenn.dev/qnighy/articles/19603f11d5f264